.button {
    font-size: 30px;
    font-family: Raleway;
    line-height: 30px;
    padding: 0.618em 1em;
    border-radius: 10px 10px 12px 12px;
    box-shadow: 0px 8px 0px 0px #2980b9,
        /* button thickness */
        0px 0 20px rgba(255, 255, 255, 0.2) inset,
        /* inner glow */
        2px 30px 0px rgba(255, 255, 255, 0.1) inset,
        /* sublte reflection */
        5px 15px 30px -10px #000;
    /* dark shadow underneath */
    border: 1px solid #2980b9;
    cursor: pointer;
    background: #3498db;
    color: #ecf0f1;
    text-shadow: 1px 1px 1px #34495e;
    transform: rotateX(5deg);
    margin: 10px 0 10px 0;
    width: 280px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.button:hover {
    margin-top: 15px;
    margin-bottom: 5px;
    box-shadow: 0px 5px 0px 0px #2980b9,
        /* button thickness */
        0px 0 50px rgba(134, 243, 255, 1) inset,
        /* inner glow */
        5px 28px 0px rgba(255, 255, 255, 0.15) inset,
        /* sublte reflection */
        0px 0px 30px rgba(134, 243, 255, 0.2),
        /* outer glow */
        5px 15px 30px -10px #000;
    /* dark shadow underneath */
    color: #fff;
    filter: saturate(1.5);
}

.button:active {
    margin-top: 18px;
    margin-bottom: 2px;
    box-shadow: 0px 2px 0px 0px #2980b9,
        /* button thickness */
        0px 0 100px 10px rgba(134, 243, 255, 1) inset,
        /* inner glow */
        5px 25px 0px rgba(255, 255, 255, 0.1) inset,
        /* sublte reflection */
        0px 0px 30px rgba(134, 243, 255, 0.5),
        /* outer glow */
        5px 15px 30px -10px #000;
    /* dark shadow underneath */
    filter: saturate(1.7);
}

button:disabled {
    /* 禁用状态的样式 */
    cursor: default;
    /* 例如，移除手形光标 */
    background-color: #7e7e7e;
    /* 禁用状态的背景颜色 */
    color: #999;
    /* 禁用状态的文本颜色 */
    box-shadow: unset;
    pointer-events: none;
    border: unset;
}